<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>订单</title>
    <!-- SCRIPTS -->
    <script type="text/javascript" src="/mes/static/js/vue.js"></script>
    <script type="text/javascript" src="/mes/static/js/axios.min.js"></script>
    <script type="text/javascript" src="/mes/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/mes/static/js/jquery.zlight.menu.1.0.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/mes/static/js/index.js"></script>

    <!-- STYLES -->
    <link rel="stylesheet" href="/mes/static/css/font-awesome.min.css" media="screen">
    <link rel="stylesheet" href="/mes/static/css/style.css" media="screen">
    <link rel="stylesheet" href="/mes/static/css/zlight.menu.css" media="screen">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/mes/static/js/index.css">
    <style>
        body{
            background-color: white;
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        [v-cloak]{
            display: none;
        }
        .el-table__expanded-cell[class*="cell"] {
            padding: 10px 15px;
        }
        .demo-table-expand .el-form-item {
            margin-left: 35px;
            margin-right: 0;
            margin-bottom: 0;
            width: 46%;
        }
        #img{
            border: 1px none #000;
            display: block;
        }
        canvas 	{ background-color:transparent; border: 2px solid deepskyblue; top: 0; left: 0; position:absolute;}
        canvas.resize-ne { cursor: ne-resize; }
        canvas.resize-se { cursor: se-resize; }
        canvas.resize-sw { cursor: sw-resize; }
        canvas.resize-nw { cursor: nw-resize; }
        canvas.move { cursor: move; }
        canvas.default { cursor: default; }
        <!--
        .mini{width:380px; height:380px; margin:0px auto;}
    </style>
    <script type="text/javascript" src="/mes/static/js/fabric.js"></script>
    <script type="text/javascript" src="/mes/static/js/layer.js"></script>
</head>
<body>
    <div id="custInfo" v-cloak>
        <table>
            <tr>
                <td>
                    <el-select @change="changeState"  v-model="customerLevel" placeholder="订单状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="未完成" value="1"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                    </el-select>
                </td>
                <td>
                    <el-input
                            style="width:200px;"
                            placeholder="请输入名称"
                            v-model="customerName"
                            clearable>
                    </el-input>
                </td>
                <td>
                    <el-date-picker
                            editable=false
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="beginTime"
                            type="datetime"
                            placeholder="选择开始时间"
                            :picker-options="pickerBeginDateBefore"  @change="changeTime">
                    </el-date-picker>
                </td>
                <td>
                    ——
                </td>
                <td>
                    <el-date-picker
                            editable="false"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="endTime"
                            type="datetime"
                            placeholder="选择结束时间"
                            :picker-options="pickerBeginDateAfter">
                    </el-date-picker>
                </td>
                <td>
                    <el-button type="primary" @click="searchCustomer" icon="el-icon-search">点击搜索</el-button>
                </td>
                <td>
                    <el-button type="primary" v-if="show" @click="addCustomer">新增订单</el-button>
                </td>
                <td>
                    <el-button type="success" v-if="show" @click="exportExcel">导出表格</el-button>
                </td>
                <td>
                    <el-button type="info" v-if="show"  @click="downExcel">下载模板</el-button>
                </td>
                <td>
                    <el-upload
                            v-if="show"
                            class="upload-demo"
                            action="customerUpload"
                            :on-success="uploadSuccess"
                            >
                        <el-button type="primary">批量添加</el-button>
                    </el-upload>
                </td>
            </tr>
        </table>
        <template>
            <el-table
                    @sort-change='sortChange'
                    :data="orders"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" style="background-color: #F5F7FA">
                            <el-form-item v-if="props.row.m_iMaterialFlag==0" label="产品类型">
                                <span>七巧板</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==1" label="产品类型">
                                <span>惰轮</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==2" label="产品类型">
                                <span>图章</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==3" label="产品类型">
                                <span>汽车模型</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==3 && props.row.m_iProduction==0" label="物料信息">
                                <span>从立体库中取</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==3 && props.row.m_iProduction==1" label="物料信息">
                                <span>从3D打印机取</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==0" label="物料信息">
                                <span>{{props.row.m_iProductionMessage}}</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==1" label="物料信息">
                                <span>惰轮</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.m_iMaterialFlag==0" label="物料信息">
                                <span>图章</span>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <span>{{ props.row.m_szCreateTime }}</span>
                            </el-form-item>
                            <el-form-item label="开始时间">
                                <span>{{ props.row.m_szDoneTime }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单编号"
                        prop="m_szOrderID"
                        min-width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="订单名称"
                        prop="m_szOrderName"
                        min-width="250"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="订单量"
                        prop="m_iOrderQty"
                        min-width="100"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="订单产品"
                        min-width="200"
                        align="center">
                    <template slot-scope="props">
                        <el-row v-if="props.row.m_iMaterialFlag==0">
                            <span>七巧板</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==1">
                            <span>惰轮</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==2">
                            <span>图章</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==3">
                            <span>汽车模型</span>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                        label="物料信息"
                        min-width="200"
                        align="center">
                    <template slot-scope="props">
                        <el-row v-if="props.row.m_iMaterialFlag==0">
                            <span>{{props.row.m_iProductionMessage}}</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==1">
                            <span>惰轮</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==2 && props.row.m_iProduction==0">
                            <span>从立体库中取</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==2 && props.row.m_iProduction==1">
                            <span>从3D打印机取</span>
                        </el-row>
                        <el-row v-if="props.row.m_iMaterialFlag==3">
                            <span>汽车模型</span>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                        sortable="custom"
                        label="创建时间"
                        prop="m_szCreateTime"
                        min-width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        sortable="custom"
                        label="完成时间"
                        prop="m_szDoneTime"
                        min-width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        min-width="320"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-tag
                                v-if="scope.row.customerLevel==0"
                                disable-transitions="true">已下达</el-tag>
                        <el-tag
                                v-if="scope.row.customerLevel==1"
                                disable-transitions="true"
                                type="warning">生产中</el-tag>
                        <el-tag
                                v-if="scope.row.customerLevel==2"
                                disable-transitions="true"
                                type="success">已完成</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!---------------------------------分页--------------------------------------------->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[6,12,24,50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="选择意向产品" :visible.sync="productFormVisible" >
        <el-form ref="productForm" :rules="productRules"  :inline="inline" :model="productForm" label-width="120px" size="mini" label-position="left">
            <el-form-item label="品牌"  prop="make" :label-width="formLabelWidth">
                <el-select v-model="productForm.make" @change="makeChange()" placeholder="品牌">
                    <el-option v-for="thisMake in xmake" v-bind:value="thisMake">{{thisMake}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系列" prop="line" :label-width="formLabelWidth">
                <el-select v-model="productForm.line"  @change="lineChange()" placeholder="系列">
                    <el-option v-for="thisLine in line" v-bind:value="thisLine">{{thisLine}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="款型" prop="type" :label-width="formLabelWidth">
                <el-select v-if="bond" v-model="productForm.type" @change="typeChange()" placeholder="款型">
                    <el-option  v-for="thisType in type" v-bind:value="thisType">{{thisType}}</el-option>
                </el-select>
                <el-input v-else v-model="productForm.type" readonly="true" autocomplete="off"></el-input>

            </el-form-item>
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="productFormVisible = false">取 消</el-button>
                <el-button  type="primary" @click="submitProductForm('productForm')" >确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
            <el-form ref="form" :rules="rules"  :inline="inline" :model="form" label-width="80px" size="mini" label-position="left">
                <el-input v-model="form.customerid" type="hidden"  autocomplete="off"></el-input>
                <table style="padding-left:30px">
                    <tr>
                        <td>
                            <el-form-item label="订单编号" prop="customername" :label-width="formLabelWidth">
                                <el-input v-model="form.customername" autocomplete="off"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="订单产品" prop="productid" :label-width="formLabelWidth">
                                <el-input v-model="pname" readonly="true" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="selProduct">选择/查看</el-button>
                        </td>
                        <td>
                            <el-form-item label="订单量" prop="ordercount" :label-width="formLabelWidth">
                                <el-input v-model="form.ordercount" autocomplete="off"></el-input>
                            </el-form-item>
                        </td>
                    </tr>

<!--                    <tr>-->
<!--                        <td>-->
<!--                            <el-form-item label="挂靠站点"  prop="sex" >-->
<!--                                <el-radio-group v-model="form.sex">-->
<!--                                    <el-radio label="贽丰"></el-radio>-->
<!--                                    <el-radio label="贽匠"></el-radio>-->
<!--                                    <el-radio label="贽科"></el-radio>-->
<!--                                </el-radio-group>-->
<!--                            </el-form-item>-->
<!--                        </td>-->
<!--                    </tr>-->
                    <tr>
                        <td>
                            <el-form-item label="工作中心" prop="maintainrecordid" :label-width="formLabelWidth">
                                <el-select v-model="form.maintainrecordid" @change="maintainChange()" placeholder="工作中心">
                                    <el-option v-for="thisCenter in workCenters" v-bind:value="thisCenter">{{thisCenter}}</el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="工艺路线"  prop="fid" :label-width="formLabelWidth">
                                <el-select v-model="form.fid" @change="fidChange()" placeholder="工作中心">
                                    <el-option v-for="thisCraft in crafts" v-bind:value="thisCraft">{{thisCraft}}</el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>

                        <td>
                            <el-form-item label="创建时间"  prop="createtime"  :label-width="formLabelWidth">
                                <div class="block">
                                    <el-date-picker
                                            :disabled="disabled"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            v-model="form.createtime"
                                            type="datetime"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="备注" prop="comment" :label-width="formLabelWidth">
                                <el-input
                                        type="textarea"
                                        :rows="2"
                                        placeholder="请输入内容"
                                        v-model="form.comment">
                                </el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="创建人" prop="userName"  :label-width="formLabelWidth">
                                <el-input v-model="form.userName" readonly="true" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-input v-model="form.userId" type="hidden"  autocomplete="off"></el-input>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button @click="resetForm('form')">清空</el-button>
                <el-button  type="primary" @click="submitForm('form')" >确 定</el-button>
            </div>
        </el-dialog>

    </div>

    <script type="text/javascript" src="/mes/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/mes/static/js/respond.min.js"></script>
</body>
<script>
    var vm=new Vue({
        el:"#custInfo",
        data:{
            isPublic:0,//是否是公共订单页面，0代表不是，1代表是
            orders:[],
            bond:true,
            products:[],//产品
            workCenterCrafts:[],//各工作中心所属工艺
            workCenters:[],//工作中心
            crafts:[],//工艺
            bodyColor:[],//车身颜色
            inColor:[],//内置颜色
            type:[],//种类
            line:[],//系列
            pid:'',//所选产品的id
            pname:'未选择',//所选产品的名称
            xmake: [],//品牌
            loginName:'',//当前登录名
            show:true,//判断对不同的角色显示按钮
            selectRows:[],//导出选择框
            pageNo:1,
            //一页显示多少条
            pageSize:12,
            //总计多少条数据
            total:0,
            prop:'createtime',
            orderd:'desc',
            customerLevel:'',
            customerName:'',
            beginTime:'',
            endTime:'',
            inline:true,
            disabled:false,
            dialogFormVisible:false,//表单隐藏
            innerVisible:false,
            productFormVisible:false,//意向产品选择弹窗隐藏
            dialog:false,//七巧板隐藏
            productForm:{
                make:'',
                line:'',
                type:'',
            },
            form:{
                customerid:'',
                customername:'',
                sex:'',
                ordercount:'',
                orderdone:'',
                fid:'',
                maintainrecordid:'',
                productid:'',
                make:'',
                line:'',
                type:'',
                createtime:'',
                customerlevel:'',
                userId:'',
                userName:'',
                comment:'',
                },
            rules: {                    //表单验证
                customername: [
                    { required: true, message: '订单编号不能为空', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择站点', trigger: 'blur' },
                ],
                createtime: [
                    { required: true, message: '请选择创建时间', trigger: 'blur' },
                ],
                ordercount: [
                    // { required: true, message: '请输入联系方式', trigger: 'blur' },
                     {required:true,pattern:/^\+?[1-9][0-9]*$/,message:'请输入一个正整数',change:'blur'}
                ],
                fid: [
                    {required: true, message: '请选工艺路线', trigger: 'blur'}
                ],
                maintainrecordid:[
                    {required: true, message: '请选择工作中心', trigger: 'blur'}
                ],
                productid: [
                    { required: true, message: '请选择产品', trigger: 'blur' }
                ],
            },
            productRules:{
                make: [
                    { required: true, message: '请选择产品品牌', trigger: 'blur' },
                ],
                line: [
                    { required: true, message: '请选择产品系列', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择产品型号', trigger: 'blur' },
                ],
                outColor: [
                    { required: true, message: '请选择外观颜色', trigger: 'blur' },
                ],
                inColor: [
                    { required: true, message: '请选择内饰颜色', trigger: 'blur' },
                ],
            },
            pickerBeginDateBefore: {
                disabledDate: (time) => {
                    let beginDateVal = vm.endTime;
                    if (beginDateVal) {
                        return time.getTime() > beginDateVal;
                    }
                }
            },
            pickerBeginDateAfter: {
                disabledDate: (time) => {
                    let beginDateVal =vm.beginTime;
                    if (beginDateVal) {
                        return time.getTime() < beginDateVal;
                    }
                }
            },
        },
        created:function () {
            //封装分页查询条件
            var temp=this;
            var query={"customerLevel":this.customerLevel,"pageNo":this.pageNo,"pageSize":this.pageSize,"prop":this.prop,"orderd":this.orderd};
            axios.post('listOrders',query)
                .then(function (value) {
                    temp.orders=value.data.rowList;
                    temp.total = value.data.totalList;
                })
                .catch(function (error) {
                    console.log(error);
                });
            axios.post("listWorkCenterCrafts").then(function (value) {
                vm.workCenterCrafts=value.data;
                for (var i = 0; i <vm.workCenterCrafts.length; i++) {
                    var flag=true;
                    for(var j=0;j<vm.workCenters.length;j++){
                        if(vm.workCenterCrafts[i].wname==vm.workCenters[j]){
                            flag=false;
                        }
                    }
                    if(flag==true){
                        vm.workCenters.push(vm.workCenterCrafts[i].wname);
                    }
                }
            })
                .catch(function (error) {
                    console.log(error);
                });
            //判断按钮操作是否可见
            axios.post("getLoginInfo")
                .then(function (response) {
                    if(response.data.rId!=4){
                        vm.show=false;
                    }
                })
        },
        methods:{
            loadingData: function () {
                //定义请求的url
                var url = "listCustomer";
                //查询
                var customerName=vm.customerName;
                var beginTime=vm.beginTime;
                var endTime=vm.endTime;
                var isPublic=vm.isPublic;
                //排序
                var prop=vm.prop;
                var orderd=vm.orderd;
                //封装分页查询条件
                var query={"customerLevel":this.customerLevel,"pageNo":vm.pageNo,"pageSize":vm.pageSize,"customerName":customerName,
                    "beginTime":beginTime,"endTime":endTime,"prop":prop,"orderd":orderd,"isPublic":isPublic};
                axios.post(url,query).then(function (value) {
                    vm.orders=value.data.rowList;
                    vm.total = value.data.totalList;
                })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.post("listWorkCenterCrafts").then(function (value) {
                    vm.workCenterCrafts=value.data;
                    for (var i = 0; i <vm.workCenterCrafts.length; i++) {
                        var flag=true;
                        for(var j=0;j<vm.workCenters.length;j++){
                            if(vm.workCenterCrafts[i].wname==vm.workCenters[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.workCenters.push(vm.workCenterCrafts[i].wname);
                        }
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                });
            },
            //限制时间框的时间选择
            changeTime(date){
                vm.endTime="";
                this.pickerBeginDateAfter={
                    disabledDate(time) {
                        //开始时间-结束时间
                        return (time.getTime() < new Date(date).getTime());
                    }
                }
            },
            //多选数据筛选
            handleSelectionChange:function(value){
                // vm.selectRows=[];//先置空，在把已经选的id加入
                //  for(var i=0;i<value.length;i++){
                //      vm.selectRows.push(value[i].customerId);
                //    // alert(value[i].customerId);
                //  }
                vm.selectRows=value;
            },
            //表格导出
            exportExcel:function(){
                console.log(vm.selectRows);
                if(vm.selectRows==0){
                    vm.msg("请选择至少一条数据");
                }else{
                    var url = "exportCustomerInExcel";
                    var query = {"customers":vm.selectRows}
                    axios.post(url, query).then(function (response) {
                        vm.msg(response.data.message);
                    });
                }

            },
            //工艺路线筛选
            maintainChange:function(){
                vm.crafts=[];
                vm.form.fid="";
                for (var i=0;i<vm.workCenterCrafts.length;i++){
                    if (vm.workCenterCrafts[i].wname==vm.form.maintainrecordid){
                        var flag=true;
                        for (var j=0;j<vm.crafts.length;j++){
                            if (vm.workCenterCrafts[i].cname==vm.crafts[j]){
                                flag=false;
                            }
                        }
                        if (flag==true){
                            vm.crafts.push(vm.workCenterCrafts[i].cname);
                        }
                    }
                }
            },
            //产品系列筛选
            makeChange:function(){
                vm.line=[];
                vm.productForm.line="";
                vm.productForm.type="";
                for (var i=0;i<vm.products.length;i++){
                    if(vm.products[i].make==vm.productForm.make){
                        var flag=true;
                        for(var j=0;j<vm.line.length;j++){
                            if(vm.products[i].line==vm.line[j]){
                                flag=false;
                            }
                        }
                        if(flag==true){
                            vm.line.push(vm.products[i].line);
                        }
                    }
                }
            },
            //产品类型筛选
            lineChange:function(){
                vm.type=[];
                vm.productForm.type="";
                if (vm.productForm.line=='七巧板') {
                    vm.dialog=true;
                    vm.innerVisible=true;
                    vm.initDialog();
                }else {
                    for (var i = 0; i < vm.products.length; i++) {
                        if (vm.products[i].make == vm.productForm.make && vm.products[i].line == vm.productForm.line) {
                            var flag = true;
                            for (var j = 0; j < vm.type.length; j++) {
                                if (vm.products[i].type == vm.type[j]) {
                                    flag = false;
                                }
                            }
                            if (flag == true) {
                                vm.type.push(vm.products[i].type);
                            }
                        }
                    }
                }
            },
            //修改查找状态
            changeState:function(value){
                vm.customerLevel=value;
                vm.loadingData();
            },
            //修改一页显示多少行
            handleSizeChange:function (pageSize) {
                vm.pageSize=pageSize;
                //刷新页面
                vm.loadingData();

            },

            //修改当前页
            handleCurrentChange:function (pageNo) {
                //vm.pageNo是全局变量，跟view绑定，参数pageNo是切换当前页传入的值
                vm.pageNo=pageNo;
                //刷新页面
                vm.loadingData();
            },

            //搜索
            searchCustomer:function () {
                vm.loadingData();
            },
            //表格排序
            sortChange:function (column,prop, order) {
                vm.prop=column.prop;
                if(column.order.indexOf("asc")!=-1){
                    vm.orderd="asc";
                }
                if(column.order.indexOf("desc")!=-1){
                    vm.orderd="desc";
                }
                vm.loadingData();
            },
            //表格重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //添加订单
            addCustomer:function () {
                vm.pname='未选择';
                vm.productForm={
                    make:'',
                    line:'',
                    type:'',
                };
                vm.disabled=false;
                vm.dialogFormVisible=true;
                vm.getLoginInfo();
                vm.form.customerid='';//因为有一个隐藏框，说以手动置空
            },
            //获取登录信息
            getLoginInfo:function(){
                axios.post("getLoginInfo")
                    .then(function (response) {
                        vm.resetForm('form');
                        vm.form.userName=response.data.name;
                        vm.form.userId=response.data.userId;
                    })
            },
            followCustomer:function(customerId,userName,product){
                if(product==""||product==null){
                    vm.msg("请先选择产品");
                }else{
                    window.location.href = '/mes/customerFollow/followCustomer?customerId='+customerId;
                }
            },
            //添加修改的表单保存
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        if(vm.form.customerid!=''){
                            axios.post('updateCustomer',vm.form)
                                .then(function (value) {
                                    vm.loadingData();
                                    if (value.data.resultStatus==1){
                                        vm.complete(value.data.message);
                                    }else {
                                        vm.error(value.data.message);
                                    }

                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }else{
                            axios.post('addCustomer',vm.form)
                                .then(function (value) {
                                    vm.loadingData();
                                    if (value.data.resultStatus==1){
                                        vm.complete(value.data.message);
                                    }else {
                                        vm.error(value.data.message);
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //提交产品选择表单
            submitProductForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(vm.productForm.line=='七巧板'){
                            vm.pname=vm.productForm.make+" "+vm.productForm.line;
                        }else{
                            vm.pname=vm.productForm.make+" "+vm.productForm.line+" "+vm.productForm.type;
                        }
                        for(var i=0;i<vm.products.length;i++){
                            if(vm.products[i].make==vm.productForm.make){
                                if(vm.products[i].line==vm.productForm.line){
                                    if(vm.products[i].type==vm.productForm.type){
                                               vm.pid=vm.products[i].pid;
                                               //把选中的产品的id给表单
                                               vm.form.productid=vm.pid;
                                               vm.form.make=vm.products[i].make;
                                               vm.form.line=vm.products[i].line;
                                               vm.form.type=vm.products[i].type;
                                               // alert("产品id"+vm.pid);
                                                break;
                                    }
                                }
                            }

                        }

                        this.productFormVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            editCustomer:function(customerId,userName){
                //让产品选择初始化
                vm.pname='未选择';
                vm.crafts=[];
                vm.dialogFormVisible =true;
                vm.disabled=true;
                //vm.resetForm('form');
                var params =  new URLSearchParams();
                params.append('customerId',customerId);
                params.append('userName',userName);
                params.append('make',make);
                wxnaxios.post('getcustomer').message.innerVisible=
                axios.post('getCustomer', params)
                    .then(function (value) {
                        if(value.data.productId!=null){
                            vm.pname=value.data.make+value.data.line+value.data.type;
                            vm.productForm={
                                make:value.data.make,
                                line:value.data.line,
                                type:value.data.type,
                            }
                        }else{
                            vm.productForm={
                                make:'',
                                line:'',
                                type:'',
                            };
                        }
                        vm.form= {
                            customerid:value.data.customerId,
                            customername:value.data.customerName,
                            sex:value.data.sex,
                            productid:value.data.productId,
                            createtime:value.data.createTime,
                            userName:value.data.name,
                            userId:value.data.userId,
                            fid:value.data.fid,
                            maintainrecordid:value.data.maintainRecordId,
                            name:value.data.name,
                            comment:value.data.comment,
                            ordercount:value.data.orderCount,

                        }
                    })
                    .catch(function (error) {
                         console.log(error);
                    });
            },
            //订单流失
            flow:function(){
                vm.msg("订单已流失");
            },
            //订单成交
            success:function(){
                vm.msg("订单已成交");
            },
            //删除该用户
            delCustomer:function(customerId,userId){
                this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params =  new URLSearchParams();
                    params.append('customerId',customerId);
                    params.append('userId',userId);
                    axios.post('delCustomer', params)
                        .then(function (value) {
                            vm.loadingData();
                            vm.msg(value.data.message);

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }).catch(() => {
                    vm.msg("已取消删除");
                });
            },
            complete:function(msg) {
                this.$notify({
                    title: '成功',
                    message: msg,
                    type:'success'
                });
            },
            error:function(msg) {
                this.$notify.error({
                    title: '错误',
                    message: msg
                });
            },
            msg:function(msg) {
                this.$notify.info({
                    title: '提示',
                    message: msg
                });
            },
            completeinfo(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },

            msginfo(msg) {
                this.$message({
                    message: msg,
                });
            },

            errorinfo(msg) {
                this.$message.error(msg);
            },
            initDialog:function(){
                window.add
                var part1;
                var part2;
                var part3;
                var part4;
                var part5;
                var part6;
                var part7;
                var part8;
                var angle = new Array();
                    var canvas = this.__canvas = new fabric.Canvas('canvid1');
                    fabric.Object.prototype.transparentCorners = true;
                    fabric.Object.prototype.borderColor = 'rgba(255,0,0,1.0)';
                    fabric.Object.prototype.hasBorders = true;
                    fabric.Object.prototype.cornerColor = 'rgba(255,0,0,1.0)';
                    fabric.Object.prototype.cornerSize = 15;
                    angle[0] = 0;
                    angle[1] = 0;
                    angle[2] = 0;
                    angle[3] = 0;
                    angle[4] = 0;
                    angle[5] = 0;
                    angle[6] = 0;
                    angle[7] = 0;

                    part1 = new fabric.Triangle({
                        width: 64, height: 32, left: 280-31, top: 113-15.5,
                        fill: 'rgba(132, 0, 132,1.0)'
                    });
                    part1.angle = 0;

                    part2 = new fabric.Triangle({
                        width: 92, height: 46, left: 96-31, top: 180-15.5,
                        fill: 'rgba(255, 128, 255,1.0)'
                    });
                    part2.angle = 0;
                    part3 = new fabric.Rect({
                        width: 46, height: 46, left: 144-62.5, top: 181-31.25,
                        fill: 'rgba(0, 255, 0,1.0)',
                        centerdScaling:true
                    });
                    part3.angle = 0;
                    part4 = new fabric.Triangle({
                        width: 128, height:64,left:  323-62.5, top: 178-31.25, fill: 'rgba(255, 255, 0,1.0)'
                    });
                    part4.angle = 0;
                    part5 = new fabric.Triangle({
                        width: 128, height: 64, left: 170-22.5, top: 77-22.5, fill: 'rgba(102, 0, 0,1.0)'
                    });
                    part5.angle = 0;
                    //width：92,height：32
                    part6 = new fabric.Polygon([{x:64,y:245},{x:96,y:216},{x:96,y:155},{x:64,y:184}],{fill:'rgba(0, 0, 255,1.0)'});
                    part6.angle = 0;

                    part7 = new fabric.Triangle({
                        width: 64, height: 32, left: 152-44, top: 216-22.5,
                        fill: 'rgba(255, 0, 0,1.0)'
                    });
                    part7.angle = 0;
                    part8 = new fabric.Polygon([{x:24,y:216},{x:56,y:245},{x:56,y:184},{x:24,y:155}],{fill:'rgba(255, 255, 0,1.0)'});
                    canvas.add(part1, part2, part3, part4, part5,part6,part7);
                    canvas.on({
                        'object:moving': onChange,
                        'object:scaling': onChange,
                        'object:rotating': onChange,
                    });
                    var res = document.getElementById("resLabel");

                    onChange(part7);
                    function onChange(options) {

                        if(part1.angle>180)
                        {
                            angle[0] = 360-part1.angle;
                        }
                        else
                        {
                            angle[0] = -part1.angle;
                        }
                        if(part2.angle>180)
                        {
                            angle[1] = 360-part2.angle;
                        }
                        else
                        {
                            angle[1] = -part2.angle;
                        }
                        if(part3.angle>180)
                        {
                            angle[2] = 360-part3.angle;
                        }
                        else
                        {
                            angle[2] = -part3.angle;
                        }
                        if(part4.angle>180)
                        {
                            angle[3] = 360-part4.angle;
                        }
                        else
                        {
                            angle[3] = -part4.angle;
                        }
                        if(part5.angle>180)
                        {
                            angle[4] = 360-part5.angle;
                        }
                        else
                        {
                            angle[4] = -part5.angle;
                        }
                        if(part6.angle>180)
                        {
                            angle[5] = 360-part6.angle;
                        }
                        else
                        {
                            angle[5] = -part6.angle;
                        }
                        if(part7.angle>180)
                        {
                            angle[6] = 360-part7.angle;
                        }
                        else
                        {
                            angle[6] = -part7.angle;
                        }

                        res.innerHTML = parseInt(part1.getCenterPoint().x)+","+parseInt(part1.getCenterPoint().y)+","+parseInt(angle[0])
                            +"||"+parseInt(part2.getCenterPoint().x)+","+parseInt(part2.getCenterPoint().y)+","+parseInt(angle[1])
                            +"||"+parseInt(part3.getCenterPoint().x)+","+parseInt(part3.getCenterPoint().y)+","+parseInt(angle[2])
                            +"||"+parseInt(part4.getCenterPoint().x)+","+parseInt(part4.getCenterPoint().y)+","+parseInt(angle[3])
                            +"||"+parseInt(part5.getCenterPoint().x)+","+parseInt(part5.getCenterPoint().y)+","+parseInt(angle[4])
                            +"||"+parseInt(part6.getCenterPoint().x)+","+parseInt(part6.getCenterPoint().y)+","+parseInt(angle[5])
                            +"||"+parseInt(part7.getCenterPoint().x)+","+parseInt(part7.getCenterPoint().y)+","+parseInt(angle[6]);

                        canvas.forEachObject(function(obj) {
                        });
                        //
                    }

            },
            //文件上传成功
            uploadSuccess: function (response, file, fileList) {
                vm.loadingData();
                vm.msg(response.message);
            },
            downExcel:function () {
                window.location.href="/mes/temp/excelTemp.xlsx"
            },
            selProduct:function () {
                vm.productFormVisible=true;

                //获取所有产品的信息
                axios.post('listProducts')
                    .then(function (value) {
                        vm.products=value.data;
                        for (var i = 0; i <vm.products.length; i++) {
                            var flag=true;
                            for(var j=0;j<vm.xmake.length;j++){
                                if(vm.products[i].make==vm.xmake[j]){
                                    flag=false;
                                }
                            }
                            if(flag==true){
                                vm.xmake.push(vm.products[i].make);
                            }
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
    });
   function  checkTel(rule, value,callback) {
        if (!value){
            callback(new Error('请输入联系方式'));
        }else  if(!isValidPhone(value)){
            callback(new Error('请输入正确的11位手机号码'));
        }else {
            callback();
        }
    }
    function  checkSecondTel(rule, value,callback) {
       if(value){
           if(!isValidPhone(value)){
               callback(new Error('请输入正确的11位手机号码'));
           }else {
               callback();
           }
       }else {
           callback();
       }
    }

    function isValidPhone(str) {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        return reg.test(str);
    }
    function checkIdCard(rule, value,callback) {
        if(value){
            if(!isCardNo(value)){
                callback(new Error('身份证号码格式不正确'));
            }else {
                callback();
            }
        }else {
            callback();
        }
    }
    function isCardNo(card)
    {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
        return reg.test(card);
    }
</script>
</html>